<script setup>
/**
 * 作者: 石兴龙
 * 抖音: 程序员小石
 * 微信: Codingxiaoshi
 */

import { onMounted } from 'vue'
import EventHub from '../../utils/eventHub'
import { systemStore } from '../../store/system'
import singlecover from '../../assets/singlecover.png'

const system = systemStore();

onMounted(() => {
  console.log('system', system)
})

const play = () => {
  system.setAudioStatus(system.audioStatus === 'stop' ? 'play' : 'stop')
}

window.stopOrPlay = play

const audioPrev = () => {
  system.audioPrev()
  EventHub.emit('audioRestore')
}
window.audioPrev = audioPrev

const audioNext = () => {
  system.audioNext()
  EventHub.emit('audioRestore')
}
window.audioNext = audioNext

</script>
<template>
  <div class="photo-container">
    <div :class="['photo photo-start ',
      system.audioStatus !== 'play' ? 'photo-stop' : ''
    ]" style="transform: rotate(0deg) ">
      <div class="photo-img" :style="{ background: `url(${system.currentAudio.audioImg})` }"></div>
      <div class="photo-img-bg" :style="{ background: `url(${singlecover})` }"></div>
    </div>
    <div class="control">
      <div class="iconfont icon-xiangzuo1" @click="audioPrev"></div>
      <div :class="['iconfont',
        system.audioStatus !== 'stop' ? 'icon-stop' : 'icon-kaishi1'
      ]" style="width: 50px; height: 50px;" @click="play"></div>
      <div class="iconfont icon-xiangyou1" @click="audioNext"></div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@keyframes rotate-photo {
  form {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.photo-start {
  animation: rotate-photo 5s linear infinite;
}

.photo-stop {
  animation-play-state: paused;
}

.control {
  display: flex;
  -webkit-app-region: no-drag;
  flex-direction: row;
  align-items: baseline;
  height: 40px;
  position: absolute;
  bottom: 10px;
  left: 0%;

  &>div {
    width: 40px;
    cursor: pointer;
    background: rgba(255, 2552, 255, .8);
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    transition: .5s;
    align-items: center;

    &:hover {
      opacity: .8;
      // background: #fff;
      // box-shadow: 0 0 10px rgba(0, 0, 0, .7);
    }
  }
}

.photo-container {
  -webkit-app-region: drag;
  cursor: pointer;
  // border: 1px solid red;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  bottom: 0;
  z-index: 2;
  left: -65px;

  .photo {
    width: 130px;
    height: 130px;

    img {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .photo-img {
      position: absolute;
      border-radius: 50%;
      background-size: 100% 100% !important;
      top: 10%;
      left: 10%;
      width: 80%;
      height: 80%;
    }

    .photo-img-bg {
      position: absolute;
      border-radius: 50%;
      background-size: 100% 100% !important;
      top: 5%;
      left: 5%;
      width: 90%;
      height: 90%;
    }
  }
}
</style>